<div id="datagrid_${viewCode}">
    <template>
        <#if condition??>
            <#--处理搜索条件-->
            <div style="margin-bottom: 10px">
                <#if condition.properties??>
                    <el-form :label-position="labelPosition" class="demo-ruleForm" label-width="100px" :model="${viewCode}" ref="${viewCode}" @submit.native.prevent>
                        <#list condition.properties as prop>
                            <#if prop?index % 3 == 0>
                                <el-row :gutter="20">
                            </#if>
                            <el-col :span="8">
                                <el-form-item label="${prop.title}:" prop="${prop.field}">
                                    <#if prop.type == 'text'>
                                        <el-input v-model="${viewCode}.${prop.field}" placeholder="${(prop.placeholder)!''}" clearable></el-input>
                                    <#elseif prop.type == 'select'>
                                        <el-select v-model="${viewCode}.${prop.field}" placeholder="${(prop.placeholder)!''}"
                                                <#if prop.multiselect?? && prop.multiselect >
                                                    multiple
                                                <#else >
                                                    clearable
                                                </#if>
                                                   filterable>
                                            <#if prop.dataset?? && datasetRet[prop.dataset]??>
                                                <#list datasetRet[prop.dataset] as opt>
                                                    <el-option label="${opt.value!''}" value="${opt.key!''}"></el-option>
                                                </#list>
                                            <#elseif prop.options??>
                                                <#list prop.options as opt>
                                                    <el-option label="${opt.label!''}" value="${opt.key!''}"></el-option>
                                                </#list>
                                            </#if>
                                        </el-select>
                                    <#--日期时间框-->
                                    <#elseif prop.type == "datetime">
                                        <el-date-picker v-model="${viewCode}.${prop.field}" type="datetime" placeholder="${(prop.placeholder)!''}">
                                        </el-date-picker>
                                    <#--日期框-->
                                    <#elseif prop.type == "date">
                                        <el-date-picker v-model="${viewCode}.${prop.field}" type="date" placeholder="${(prop.placeholder)!''}">
                                        </el-date-picker>
                                    </#if>
                                </el-form-item>
                            </el-col>
                            <#if (prop?index + 1) % 3 == 0 || prop?is_last>
                                </el-row>
                            </#if>
                        </#list>
                    </el-form>
                </#if>

                <#--处理按钮-->
                <#if condition.buttons??>
                    <div style="margin-top:10px">
                        <#list condition.buttons as button>
                            <el-button <#if button.type??>type="${button.type}"</#if> <#if button.onclick??>@click="v_${button.onclick}"</#if> >${button.name}</el-button>
                        </#list>
                    </div>
                </#if>
            </div>
        </#if>

        <el-table :data="${viewCode}tableData" stripe border
            <#if properties??>
                <#list properties?keys as key>
                     ${key}="${properties[key]}"
                </#list>
            </#if>
        >
            <#if columns??>
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <#list columns as col>
                    <el-table-column
                            prop="${col.field}"
                            label="${col.label}"
                            <#if col.width??>
                                width="${col.width}"
                            </#if>
                            >
                    </el-table-column>
                </#list>
            </#if>
        </el-table>

        <div style="margin-top: 10px">
            <el-pagination
                    background
                    @size-change="${viewCode}PageSizeChange"
                    @current-change="${viewCode}PageCurrentChange"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="20"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalRecords">
            </el-pagination>
        </div>

    </template>
</div>

<script type="text/javascript">
    var ${viewCode}Data = {
        data() {
            return {
                labelPosition: 'right',
                totalRecords: 0,
                pageNum: 1,
                pageSize: 20,
                ${viewCode}tableData: [
                    <#if (datasetRet[dataset].data)??>
                        <#list datasetRet[dataset].data as obj>
                            {
                                <#if columns??>
                                    <#list columns as col>
                                        ${col.field}: '${(obj[col.field])!}'
                                        <#sep >,</#sep>
                                    </#list>
                                </#if>
                            }
                            <#sep >,</#sep>
                        </#list>
                    </#if>
                ],
                ${viewCode}: {
                    <#if condition.properties??>
                        <#list condition.properties as prop>
                            ${prop.field}: ''
                            <#sep >,
                        </#list>
                    </#if>
                }
            }
        },
        methods: {
            ${viewCode}PageSizeChange: function(val) {
                console.log('每页 ' + val + ' 条');
                this.pageSize = val;
                this.${viewCode}ReloadTable();
            },

            ${viewCode}PageCurrentChange: function(val) {
                console.log('当前页: ' + val);
                this.pageNum = val;
                this.${viewCode}ReloadTable();
            },

            ${viewCode}ReloadTable: function () {
                <#if url??>
                    let param = Object.assign(this.${viewCode}, {
                        pageSize: this.pageSize,
                        pageNum: this.pageNum
                    });
                    $.ajax({
                        url: '${url}',
                        type: 'POST',
                        dataType: 'json',
                        contentType: 'application/json',
                        data: JSON.stringify(param),
                        error: function() {
                            this.$message.error('查询失败! 请稍后重试!');
                        },
                        success: function(ret) {
                            this.${viewCode}tableData = ret.data;
                            this.totalRecords = ret.total;
                        }

                    });
                <#else>
                    doReloadTable_${viewCode}(this);
                </#if>
            }

            <#if condition.buttons??>
            ,
                <#list condition.buttons as button>
                    <#if button.onclick??>
                        v_${button.onclick}: function() {
                            ${button.onclick}();
                        }
                    <#else>
                        v_${viewCode}_${button?index}: function() {}
                    </#if>
                    <#sep>,
                </#list>
            </#if>
        }
    };

    var ${viewCode}Grid = Vue.extend(${viewCode}Data);
    var ${viewCode}GridInstance = new ${viewCode}Grid();
    ${viewCode}GridInstance.$mount('#datagrid_${viewCode}');
    ${viewCode}GridInstance.${viewCode}ReloadTable();

</script>